<template>
  <el-dialog
    :title="title"
    class="gl_dialog_TitleLine gl_dl_footer"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :before-close="cancelDialog"
    width="600px"
  >
    <el-form ref="cardForm" v-loading="loading" class="gl_form_mini" :model="cardForm" :rules="cardForm_rules" style="padding: 0 30px" label-width="100px">
      <el-form-item label="卡种名称" prop="name">
        <el-input v-model="cardForm.name" placeholder="请输入卡种名称" maxlength="10" type="text" size="mini" />
      </el-form-item>
      <el-form-item label="计费方式" prop="chargeTypeCode">
        <el-radio-group v-model="cardForm.chargeTypeCode">
          <el-radio v-for="item in dict.chargeType" :key="item.code" :label="item.code">{{ item.value }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="cardForm.chargeTypeCode === 'ClassPeriod'" label="课时数量" prop="classPeriod">
        <el-input v-model="cardForm.classPeriod" placeholder="请输入" type="number" size="mini" :min="1" />
      </el-form-item>
      <el-form-item label="有效期类型" prop="effectivePeriodTypeCode">
        <el-select v-model="cardForm.effectivePeriodTypeCode" size="mini" placeholder="请选择有效期类型" filterable @change="changeit">
          <el-option v-for="item in dict.effectivePeriodType" :key="item.code" :value="item.code" :label="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="默认有效期" prop="effectivePeriod">
        <el-input v-model="cardForm.effectivePeriod" placeholder="请输入" type="number" size="mini" :min="1">
          <template slot="append">{{ currentTimeType }}</template>
        </el-input>
      </el-form-item>
      <el-form-item label="售价" prop="price">
        <el-input v-model="cardForm.price" placeholder="请输入价格" type="number" size="mini" :min="0" />
      </el-form-item>
      <el-form-item label="状态" prop="isEnable">
        <el-radio-group v-model="cardForm.isEnable">
          <el-radio :label="true">启用</el-radio>
          <el-radio :label="false">停用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="cancelDialog">取消</el-button>
      <el-button type="primary" size="mini" @click="submit()">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import validator from '@/lib/validate/index.js';
import { mapState, mapActions } from 'vuex';
import { MembershipCardInput } from '@/lib/form/hall/swaggerForm';
import { api_POST_ClubMembershipCards, api_PUT_ClubMembershipCardsId } from '@/extend/api/hallswaggerApi/app';
export default {
  data() {
    return {
      tag: false,
      title: '新建卡种',
      currentId: '',
      dialogVisible: false,
      currentTimeType: '',
      loading: false,
      cardForm: new MembershipCardInput(),
      cardForm_rules: {
        name: [
          { required: true, message: '卡种名称不能为空', trigger: 'blur' },
          {
            validator(rule, value, callback) {
              callback(validator.checkDisciplineName(value, '请输入十位以内的数字，字母或汉字'));
            },
            trigger: 'blur'
          }
        ],
        chargeTypeCode: [{ required: true, message: '计费方式为必选项', trigger: 'blur' }],
        effectivePeriodTypeCode: [{ required: true, message: '有效期类型为必选项', trigger: 'blur' }],
        effectivePeriod: [
          { required: true, message: '有效期时间不能为空', trigger: 'blur' },
          {
            validator(rule, value, callback) {
              callback(validator.checkPositiveNumber(value, '请输入正确有效期时间'));
            },
            trigger: 'blur'
          }],
        price: [
          { required: true, message: '价格不能为空', trigger: 'blur' },
          {
            validator(rule, value, callback) {
              callback(validator.checkPrice(value, '请输入正确的价格格式，至多保留小数点后两位'));
            },
            trigger: 'blur'
          }],
        isEnable: [{ required: true, message: '状态为必选项', trigger: 'blur' }],
        classPeriod: [
          { required: true, message: '课时数量不能为空', trigger: 'blur' },
          {
            validator(rule, value, callback) {
              callback(validator.checkPositiveNumber(value, '请输入正确课时数值'));
            },
            trigger: 'blur'
          }]
      }
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict,
      cache: state => state.dict.cache
    })
  },
  created() {
    this.getDict();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict', getDictByType: 'dict/getDictByType' }),
    changeit() {
      if (this.dict.effectivePeriodType) {
        for (let i = 0; i < this.dict.effectivePeriodType.length; i++) {
          if (this.dict.effectivePeriodType[i].code === this.cardForm.effectivePeriodTypeCode) {
            this.currentTimeType = this.dict.effectivePeriodType[i].value;
          }
        }
      }
    },
    submit() {
      if (this.tag) {
        return;
      }
      // 按日期收费
      if (this.cardForm.chargeTypeCode === 'Date') {
        this.cardForm.classPeriod = null;
        if (this.cardForm_rules.classPeriod.indexOf({ required: true, message: '课时数量不能为空', trigger: 'blur' }) !== -1) {
          this.cardForm_rules.classPeriod.pop({ required: true, message: '课时数量不能为空', trigger: 'blur' });
        }
      }
      // 按课时收费
      if (this.cardForm.chargeTypeCode === 'ClassPeriod') {
        if (this.cardForm_rules.classPeriod.indexOf({ required: true, message: '课时数量不能为空', trigger: 'blur' }) === -1) {
          this.cardForm_rules.classPeriod.unshift({ required: true, message: '课时数量不能为空', trigger: 'blur' });
        }
      }
      this.cardForm.effectivePeriodTypeCode = this.cardForm.effectivePeriodTypeCode || '';
      if (this.cardForm.price === 0 || this.cardForm.effectivePeriod === 0 || (this.cardForm.classPeriod === 0 && this.cardForm.chargeTypeCode === 'ClassPeriod')) {
        const _message = (!this.cardForm.classPeriod && this.cardForm.chargeTypeCode === 'ClassPeriod' ? '课时数量，' : '') + (!this.cardForm.effectivePeriod ? '默认有效期，' : '') + (!this.cardForm.price ? '售价，' : '') + '不能为0';
        this.$message({ type: 'warning', message: _message });
        return;
      }
      this.$refs.cardForm.validate(valid => {
        if (valid) {
          const that = this;
          this.tag = true;
          this.cardForm.price = this.cardForm.price * 100;
          this.loading = true;
          if (this.title === '新建卡种') {
            api_POST_ClubMembershipCards(this.cardForm).then(res => {
              this.loading = false;
              this.$message({ type: 'success', message: '添加成功' });
              this.dialogVisible = false;
              this.cardForm = new MembershipCardInput();
              this.$parent.getPageList();
              this.tag = false;
            }, error => {
              this.loading = false;
              const _msg = error.error.message || error.message;
              this.$message({ type: 'error', message: _msg });
            });
          } else {
            api_PUT_ClubMembershipCardsId(this.currentId, this.cardForm).then(res => {
              this.loading = false;
              this.$message({ type: 'success', message: '修改成功' });
              this.dialogVisible = false;
              this.cardForm = new MembershipCardInput();
              this.$parent.getPageList(that.$parent.selectedMsg.Page);
              this.tag = false;
            }, error => {
              this.loading = false;
              const _msg = error.error.message || error.message;
              this.$message({ type: 'error', message: _msg });
            });
          }
        } else {
          return false;
        }
      });
    },
    cancelDialog() {
      this.dialogVisible = false;
      this.cardForm = new MembershipCardInput();
      this.currentTimeType = '';
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
